<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>注册</title>
        <link rel="stylesheet" type="text/css" href="/frontdesk/css/common.css">
        <link rel="stylesheet" href="/frontdesk/css/register.css">
		<!--导入jquery-->
		<script src="/frontdesk/js/jquery-3.3.1.js"></script>
    </head>
	<body>
        <div class="simple_header">
			<div class="logo">
				<img src="/frontdesk/images/logo.png" alt="">
			</div>
			<a class="link" href="/frontdesk/index"><span class="glyphicon glyphicon-home"></span>首页</a>
		</div>
    	<div class="rg_layout">
    		<div class="rg_form clearfix">
    			<div class="rg_form_left">
    				<p>新用户注册</p>
    				<p>USER REGISTER</p>
    			</div>
    			<div class="rg_form_center">
					<!--注册表单-->
    				<form id="registerForm" th:action="@{/frontdesk/member/register}" method="post">
    					<table style="margin-top: 25px;">
    						<tr>
    							<td class="td_left">
    								<label for="username">用户名</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="username" name="username" placeholder="请输入账号">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="password">密码</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="password" name="password" placeholder="请输入密码">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="email">Email</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="email" name="email" placeholder="请输入Email">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="telephone">手机号</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="telephone" name="phoneNum" placeholder="请输入您的手机号">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="sex">性别</label>
    							</td>
    							<td class="td_right gender">
    								<input type="radio" id="sex" name="sex" value="男" checked> 男
    								<input type="radio" name="sex" value="女"> 女
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="birthday">出生日期</label>
    							</td>
    							<td class="td_right">
    								<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="check">验证码</label>
    							</td>
    							<td class="td_right check">
    								<input type="text" id="check" name="checkCode" class="check">
    								<img src="/frontdesk/checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
									<script type="text/javascript">
										//图片点击事件
										function changeCheckCode(img) {
											// 在方法后添加参数的原因是，如果不添加参数，img.src的属性不会改变，此时浏览器不会
											// 向服务器发送请求
											img.src="/frontdesk/checkCode?"+new Date().getTime();
                                        }
									</script>
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left"> 
    							</td>
    							<td class="td_right check"> 
    								<input type="submit" class="submit" value="注册">
									<span id="msg" style="color: red;" th:text="${message}"></span>
    							</td>
    						</tr>
    					</table>
    				</form>
    			</div>
    			<div class="rg_form_right">
    				<p>
    					已有账号？
    					<a href="/frontdesk/login">立即登录</a>
    				</p>
    			</div>
    		</div>
    	</div>
		<!--引入尾部-->
		<footer th:replace="~{/frontdesk/footer::footer}"></footer>
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="/frontdesk/js/jquery-1.11.0.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="/frontdesk/js/bootstrap.min.js"></script>
    </body>
</html>